<template>
  <div class="dashboard-container">
    <div class="container">
      <div class="tabaleBar">
        <label style="margin: right 5px;">员工姓名：</label>
        <el-input clearable placeholder="请输入员工姓名" style="width:15%" v-model="name" />
        <el-button @click="pageQuery()" style="margin-left: 20px" type="primary">查询</el-button>
        <el-button @click="handleAddEmp" style="float: right" type="primary">+添加员工</el-button>
      </div>

      <el-table :data="records" border style="width: 100%; ">
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="账号" prop="username"></el-table-column>
        <el-table-column label="手机号" prop="phone"></el-table-column>
        <el-table-column label="账号状态" prop="status">
          <template slot-scope="scope">
            <el-button type="text">
              {{
              scope.row.status == 0 ? '禁用' : '启用'
              }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="最后操作时间" prop="updateTime"></el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleUpdateEmployee(scope.row)" type="text">修改</el-button>
            <el-button
              @click="handlerStartOrStop(scope.row)"
              size="small"
              type="text"
            >{{ scope.row.status == 1 ? '禁用' : '启用' }}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          :page-size="pageSize"
          :page-sizes="[1, 2, 3, 10]"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          class="pageList"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { getEmployeeList, enableOrDisableEmployee } from '@/api/employee'
import { log } from 'util'

export default {
  data() {
    return {
      name: '', //员工姓名
      page: 1,
      pageSize: 10, //页码
      total: 0, //每页记录数
      records: [] //当前页要展示的数据集合
    }
  },
  created() {
    this.pageQuery()
  },
  methods: {
    pageQuery() {
      getEmployeeList({
        name: this.name,
        page: this.page,
        pageSize: this.pageSize
      })
        .then(res => {
          if (res.data.code === 1) {
            this.total = res.data.data.total
            this.records = res.data.data.records
          }
        })
        .catch(err => {
          this.$message.console.error('请求出错了' + err.message)
        })
    },
    // pageSize发生变化时触发
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.pageQuery()
    },
    // page发什变化时触发
    handleCurrentChange(page) {
      this.page = page
      this.pageQuery()
    },
    // 启用禁用员工账号
    handlerStartOrStop(row) {
      //判断是否是管理员账号
      if (row.username == 'admin') {
        this.$message.error('admin为管理员账号，不能更改账号状态')
        return
      }

      // 弹出确认提示框
      this.$confirm('确认修改此员工的状态吗', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          id: row.id,
          status: !row.status ? 1 : 0
        }

        enableOrDisableEmployee(params).then(res => {
          if (res.data.code === 1) {
            this.$message.success('员工的账号状态修改成功')
            this.pageQuery()
          }
        })
        // alert(`id=:${row.id} status=${row.status}`)
      })
    },
    handleAddEmp() {
      this.$router.push('/employee/add')
    },
    handleUpdateEmployee(row) {
      if (row.username == 'admin') {
        this.$message.error('admin为管理员账号，不能修改')
        return
      }
      this.$router.push({
        path: '/employee/add',
        query: {
          id: row.id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.disabled-text {
  color: #bac0cd !important;
}
.el-table {
  margin-top: 50px;
}
</style>
